<template>
    <div class="tab-content">
        <el-form ref="batteryFormRef" :model="batteryForm" :rules="batteryRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="换电柜总数" prop="totalSwapCabinets">
                        <el-input v-model="batteryForm.totalSwapCabinets" placeholder="请输入换电柜总数">
                            <template #append>台</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="共享电池总数" prop="totalSharedBatteries">
                        <el-input v-model="batteryForm.totalSharedBatteries" placeholder="请输入共享电池总数">
                            <template #append>块</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="用户总数" prop="totalUsers">
                        <el-input v-model="batteryForm.totalUsers" placeholder="请输入用户总数">
                            <template #append>人</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="换电度数" prop="totalSwapPower">
                        <el-input v-model="batteryForm.totalSwapPower" placeholder="请输入换电度数">
                            <template #append>度</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="saveBatteryData">保存换电数据配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { updateDataClassify } from '@/api/port'
    import { ElMessage } from 'element-plus'

    // 模块3: 换电数据配置表单
    const batteryRules = {
        totalSwapCabinets: [{ required: true, message: '换电柜总数不能为空', trigger: 'blur' }],
        totalSharedBatteries: [{ required: true, message: '共享电池总数不能为空', trigger: 'blur' }],
        totalUsers: [{ required: true, message: '用户总数不能为空', trigger: 'blur' }],
        totalSwapPower: [{ required: true, message: '换电度数不能为空', trigger: 'blur' }]
    }
    const batteryForm = ref({
        totalSwapCabinets: 0, // 换电柜总数
        totalSharedBatteries: 0, // 共享电池总数
        totalUsers: 0, // 用户总数
        totalSwapPower: 0 // 换电度数
    })
    const batteryFormRef = ref()
    const saveBatteryData = async () => {
        if (!batteryFormRef.value) return
        
        try {
            await batteryFormRef.value.validate()
            await updateDataClassify({
                id: 3,
                key: 'module3',
                value: batteryForm.value
            })
            console.log('保存换电数据:', batteryForm.value)
            ElMessage.success('换电数据保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }
    
    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if(module){
            batteryForm.value = module
        }else{
            batteryForm.value = {
                totalSwapCabinets: 0, // 换电柜总数
                totalSharedBatteries: 0, // 共享电池总数
                totalUsers: 0, // 用户总数
                totalSwapPower: 0 // 换电度数
            }
        }
    }
    // 暴露方法给父组件
    defineExpose({
        init
    })
</script>
<style lang="less" scoped>

</style>